<template>
   <div class="recommend-list">
      <!-- 展示筛选的酒店的详细信息 -->
      <ul>
         <li v-for="(v, index) in a_recommendlist" :key="v.index">
            <div class="list-left">
               <div class="list-left-img">
                  <img v-lazy:="`http://101.42.51.171:9000/smart/image/${v.img}`" alt="">
               </div>
               <div class="list-left-title">
                  <div class="list-left-tagandtitle">
                     <h4>{{ v.name }}</h4>
                     <img v-lazy:="`http://101.42.51.171:9000/smart/image/star${v.star}.png`" alt="">
                     <span class="badge"></span>
                  </div>
                  <!-- 位置区域标签 -->
                  <div class="list-left-transport">
                     <p>距离近:</p>
                     <el-tag class="ml-2" type="primary" effect="plain" v-for="(k, index) in v.transport" :key="index">
                        {{ k }}
                     </el-tag>
                  </div>
                  <!-- 酒店设施，早餐，支付方式标签 -->
                  <div class="list-left-tag">
                     <el-tag class="ml-2" type="danger" effect="plain" v-for="(k, index) in v.tag" :key="index">
                        {{ k }}
                     </el-tag>
                  </div>
               </div>
            </div>

            <div class="list-right">
               <div class="list-right-comment">
                  <div class="list-right-describe">
                     <p>{{ v.grade }}</p>
                     <a href="#">{{ v.evaluate }}</a>
                  </div>
                  <div class="list-right-score">
                     <p>{{ v.score }}</p>
                  </div>
               </div>
               <div class="list-right-price">
                  <!-- 价格 -->
                  <!-- <p>￥{{ v.homeInfo[2].homePrice }}</p> -->
                  <el-button type="primary" @click="pay_hotal(index)">订购</el-button>
               </div>
            </div>

         </li>
      </ul>

   </div>
</template>

<script setup lang="ts">
import { onBeforeUpdate, onMounted } from 'vue';
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
//pinia本地化存储用户信息
import { Hotaldata } from "../store/Hotaldata.js";
import { storeToRefs } from "pinia";
const hotaldata = Hotaldata();
let { centerDialogVisible, a_recommendlist } = storeToRefs(hotaldata)
import { useUserStore } from "../store/UserStore.js";
const UserStore = useUserStore();
//路由跳转
import { useRouter } from 'vue-router';
const router = useRouter()

//订购功能
const pay_hotal = (index: any) => {
   if (sessionStorage.length != 0 && UserStore.useremail !== null) {
      //把选中的酒店的信息存到pinia中
      hotaldata.hotal = a_recommendlist.value[index]
      centerDialogVisible.value = true
      router.push({
         path: '/hotaltips',
         query: {
            id: hotaldata.hotal.id
         }
      })

   } else {
      ElMessage({
         showClose: true,
         message: '您还未登录，正在跳转登录页面...',
         type: 'error',
      })
      const message = document.querySelector('.el-message__content')?.parentNode
      //判断提示框的数量   
      if (document.getElementsByClassName('el-message__content').length > 1) {
         setTimeout(function () {
            message.parentNode.removeChild(message);
         }, 100)
      }
      setTimeout(function () {
         router.push("/login")
      }, 500)
   }

}
</script>

<style>
.el-button--primary {
   width: 80px;
}

.recommend-list ul li {
   display: flex;
   height: 120px;
   background-color: #F4F6F9;
   padding: 10px;
   padding-bottom: 0px;
   margin-bottom: 10px;
   border-radius: 25px;
}

.list-left {
   flex: 2;
   display: flex;
}

.list-right {
   flex: 1;
   border-left: 1px solid #ddd;
   text-align: right;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 120px
}

.list-right-price {
   display: block;
   padding-bottom: 20px;
}

.list-left-img {
   flex: 1;
}

.list-left-img img {
   width: 100%;
}

.list-left-title {
   flex: 3;
   margin-left: 10px;
}

/* 标题 */
.list-left-tagandtitle {
   font-size: 18px;
   line-height: 24px;
   display: flex;
   margin-bottom: 8px;
   align-items: center;
}

.list-left-tagandtitle img {
   height: 18px;
   width: auto;
   margin: 0 10px;
}

.badge {
   background: url(../assets/image/help.png) no-repeat;
   width: 16px;
   height: 16px;
}

.list-left-transport {
   margin-bottom: 8px;
   font-size: 14px;
   display: flex;

   >p {
      font-size: 12px;
      font-weight: 600;
      color: #053e87;
      text-align: center;
   }
}

.list-left-tag .el-tag {
   margin: 3px;
}

.list-right-comment {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 5px;
}

.list-right-describe p {
   color: var(--el-color-primary);
   font-size: 16px;
   font-weight: 700;
}

.list-right-describe a {
   color: #999;
   font-size: 10px;
}

.list-right-score {
   background-color: var(--el-color-primary);
   color: #fff;
   border-radius: 4px;
   padding: 5px;
   font-size: 18px;
   font-weight: 700;
   margin-left: 5px;
   padding-top: 14px;
}

.list-right-price p {
   color: var(--el-color-primary);
   font-size: 20px;
   font-weight: 700;
}
</style>